import Vue,{VNode} from 'vue';
import Icon from '../icon';
import Button from '../button';
import NumberInput from '../number-input';
/**
 * 分页
 * @author 唐国雄
 * @date 2021/6/3
 * 属性----------------------
 * v-model			当前页(仅失焦时改变), number
 * :total			总条数, number
 * :page-size		每页条数(支持sync), number
 * :max-page-size	每页最大条数(0表示不限制), number
 * :simple			简单模式, boolean
 * 事件----------------------
 * @input				当前页改变, number
 * @update:page-size	每页条数改变, number
 */
export default Vue.extend({
	name:'Pagination',
	props:{
		//当前页(仅失焦时改变)
		value:{
			type:Number,
			required:true,
		},
		//总条数
		total:{
			type:Number,
			required:true,
		},
		//每页条数(支持sync)
		pageSize:{
			type:Number,
			default:10
		},
		//每页最大条数(0表示不限制)
		maxPageSize:{
			type:Number,
			default:100
		},
		//简单模式
		simple:Boolean,
	},
	data(){
		return {
			//实时当前页
			realPage:this.value,
			//实时每页条数
			realPageSize:this.pageSize,
			//内部使用的每页条数
			lazyPageSize:this.pageSize,
		};
	},
	computed:{
		classes():string{
			return 'lexmis-Pagination';
		},
		//最大页码
		maxPage():number{
			const maxPage=Math.ceil(this.total/this.lazyPageSize);
			return maxPage>1?maxPage:1;
		},
	},
	watch:{
		value(val){
			this.realPage=val;
		},
		pageSize(val){
			this.realPageSize=val;
			this.lazyPageSize=val;
		},
		lazyPageSize(val){
			this.$emit('update:page-size',val);
		},
	},
	methods:{
		firstPage(){
			this.$emit('input',1);
		},
		previousPage(){
			// @ts-ignore
			this.$refs.pageInput.reduce();
		},
		nextPage(){
			// @ts-ignore
			this.$refs.pageInput.increase();
		},
		lastPage(){
			this.$emit('input',this.maxPage);
		},
	},
	render(h):VNode{
		//region fk特定渲染函数
		if(this.$baseui_theme==='fk'){
			return h('div',{
				staticClass:this.classes,
			},[
				'每页显示',
				h(NumberInput,{
					ref:'pageSizeInput',
					staticClass:'lms--gap',
					props:{
						value:this.realPageSize,
						min:1,
						max:this.maxPageSize===0?undefined:this.maxPageSize,
						precision:0,
						hideButton:true,
					},
					on:{
						input:(val:number) => {
							this.realPageSize=val;
						},
						change:(val:number) => {
							this.lazyPageSize=val;
						}
					},
					nativeOn:{
						keydown:(e:KeyboardEvent) => {
							if(e.key==='Enter'){
								// @ts-ignore
								this.$refs.pageSizeInput.$refs.input.blur();
							}
						}
					}
				}),
				`条/共${this.total}条记录`,
				h('div',{
					staticStyle:{
						margin:'0 6px 0 27px',
					}
				},`共${this.maxPage}页`),
				h(Button,{
					staticClass:'lexmis--marginRight',
					props:{
						disable:this.value===1,
					},
					on:{
						click:this.firstPage
					}
				},[
					h(Icon,{
						props:{
							name:'first_page'
						}
					})
				]),
				h(Button,{
					staticStyle:{
						marginRight:'15px',
					},
					props:{
						disable:this.value===1,
					},
					on:{
						click:this.previousPage
					}
				},[
					h(Icon,{
						props:{
							name:'chevron_left'
						}
					})
				]),
				'第',
				h(NumberInput,{
					ref:'pageInput',
					staticClass:'lms--gap',
					props:{
						value:this.realPage,
						min:1,
						max:this.maxPage,
						precision:0,
						hideButton:true,
					},
					on:{
						input:(val:number) => {
							this.realPage=val;
						},
						change:(val:number) => {
							this.$emit('input',val);
						}
					},
					nativeOn:{
						keydown:(e:KeyboardEvent) => {
							if(e.key==='Enter'){
								// @ts-ignore
								this.$refs.pageInput.$refs.input.blur();
							}
						}
					}
				}),
				'页',
				h(Button,{
					staticClass:'lexmis--marginRight',
					staticStyle:{
						marginLeft:'15px',
					},
					props:{
						disable:this.value===this.maxPage,
					},
					on:{
						click:this.nextPage
					}
				},[
					h(Icon,{
						props:{
							name:'chevron_right'
						}
					})
				]),
				h(Button,{
					staticClass:'lexmis--marginRight',
					props:{
						disable:this.value===this.maxPage,
					},
					on:{
						click:this.lastPage
					}
				},[
					h(Icon,{
						props:{
							name:'last_page'
						}
					})
				]),
				h(Button,'GO'),
			]);
		}
		//endregion
		return h('div',{
			staticClass:this.classes,
		},[
			h(Button,{
				staticClass:'lexmis--marginRight',
				props:{
					disable:this.value===1,
					outline:this.$baseui_theme==='red',
				},
				on:{
					click:this.firstPage
				}
			},[
				h(Icon,{
					props:{
						name:'first_page'
					}
				})
			]),
			h(Button,{
				staticClass:'lexmis--marginRight',
				props:{
					disable:this.value===1,
					outline:this.$baseui_theme==='red',
				},
				on:{
					click:this.previousPage
				}
			},[
				h(Icon,{
					props:{
						name:'chevron_left'
					}
				})
			]),
			h(NumberInput,{
				ref:'pageInput',
				staticClass:'lexmis--marginRight',
				props:{
					value:this.realPage,
					min:1,
					max:this.maxPage,
					precision:0,
					hideButton:true,
				},
				on:{
					input:(val:number) => {
						this.realPage=val;
					},
					change:(val:number) => {
						this.$emit('input',val);
					}
				},
				nativeOn:{
					keydown:(e:KeyboardEvent) => {
						if(e.key==='Enter'){
							// @ts-ignore
							this.$refs.pageInput.$refs.input.blur();
						}
					}
				}
			}),
			`/ ${this.maxPage} 页`,
			h(Button,{
				staticClass:'lexmis--marginLeft lexmis--marginRight',
				props:{
					disable:this.value===this.maxPage,
					outline:this.$baseui_theme==='red',
				},
				on:{
					click:this.nextPage
				}
			},[
				h(Icon,{
					props:{
						name:'chevron_right'
					}
				})
			]),
			h(Button,{
				staticClass:'lexmis--marginRight',
				props:{
					disable:this.value===this.maxPage,
					outline:this.$baseui_theme==='red',
				},
				on:{
					click:this.lastPage
				}
			},[
				h(Icon,{
					props:{
						name:'last_page'
					}
				})
			]),
			this.simple
				?[]
				:[
					'每页',
					h(NumberInput,{
						ref:'pageSizeInput',
						staticClass:'lexmis--marginLeft lexmis--marginRight',
						props:{
							value:this.realPageSize,
							min:1,
							max:this.maxPageSize===0?undefined:this.maxPageSize,
							precision:0,
							hideButton:true,
						},
						on:{
							input:(val:number) => {
								this.realPageSize=val;
							},
							change:(val:number) => {
								this.lazyPageSize=val;
							}
						},
						nativeOn:{
							keydown:(e:KeyboardEvent) => {
								if(e.key==='Enter'){
									// @ts-ignore
									this.$refs.pageSizeInput.$refs.input.blur();
								}
							}
						}
					}),
					`条, 共 ${this.total} 条`,
				],
		]);
	},
});
